<template>
	<el-dialog v-model="dialog" :title="form.id ? '修改运费模板' : '添加运费模板'"  width="60%" :before-close="handleClose">
		<el-form ref="formRef" :model="form" label-width="140px" :rules="rules">
			<el-card class="box-card">
				<template #header>
					<div class="card-header">
						<span>基本信息</span>
					</div>
				</template>
				<el-form-item label="模板名称" prop="name">
					<el-input v-model="form.name" maxlength="20" show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="发货地址" prop="address">
					<el-input v-model="form.address"></el-input>
				</el-form-item>
				<el-form-item label="是否包邮" prop="isInclPostage">
					<el-radio-group v-model="form.isInclPostage">
						<el-radio label="0">买家承担运费</el-radio>
						<el-radio label="1">包邮</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-card>
			<el-card class="box-card" v-if="form.isInclPostage == '0'">
				<template #header>
					<div class="card-header">
						<span>收费标准</span>
					</div>
				</template>
				<el-form-item label="计价方式" prop="pricingType">
					<el-radio-group v-model="form.pricingType">
						<el-radio label="1">按件数</el-radio>
						<el-radio label="2">按重量</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-row>
					<el-col :span="12">
						<el-form-item :label="form.pricingType == '1' ? '首件（个）' : '首重（kg）'" prop="firstNum">
							<el-input-number v-model="form.firstNum" controls-position="right" />
						</el-form-item>
						<el-form-item :label="form.pricingType == '1' ? '续件（个）' : '续重（kg）'" prop="continueNum">
							<el-input-number v-model="form.continueNum" controls-position="right" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="首费（元）" prop="firstFreight">
							<el-input-number v-model="form.firstFreight" controls-position="right" />
						</el-form-item>
						<el-form-item label="续费（元）" prop="continueFreight">
							<el-input-number v-model="form.continueFreight" controls-position="right" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-card>
			<el-card class="box-card" v-if="form.isInclPostage == '0'">
				<template #header>
					<div class="card-header">
						<span style="padding-right: 10px">指定条件包邮</span>
						<el-switch
							v-model="form.isInclPostageByIf"
							inline-prompt
							active-value="1"
							inactive-value="0"
							active-text="是"
							inactive-text="否"
						></el-switch>
					</div>
				</template>
				<el-form-item label="满包邮（元）" v-if="form.isInclPostageByIf == '1'" prop="fullAmount">
					<el-input-number v-model="form.fullAmount" controls-position="right" />
				</el-form-item>
			</el-card>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleClose">关 闭</el-button>
				<el-button type="primary" :loading="loading" @click="submitForm(formRef)">确 认</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script lang="ts">
import { defineComponent,  ref, reactive, toRefs } from 'vue';
import { addObj, editObj,getById } from '/@/api/mall/freighttemplate';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
export default defineComponent({
	emits: ['initPage'],
	setup(props, { emit }) {
		const data = reactive({
			form: { id:undefined,name:'',address:'',isInclPostage:'',pricingType:'',firstNum:0,continueNum:0,firstFreight:0,continueFreight:0,fullAmount:0,isInclPostageByIf: '0' },
			rules: {
				name: [
					{
						required: true,
						message: '请输入模板名称',
						trigger: 'change',
					},
				],
				sendTime: [
					{
						required: true,
						message: '请输入发货时间',
						trigger: 'change',
					},
				],
				address: [
					{
						required: true,
						message: '请输入发货地址',
						trigger: 'change',
					},
				],
				isInclPostage: [
					{
						required: true,
						message: '请选择是否包邮',
						trigger: 'change',
					},
				],
				isInclPostageByIf: [
					{
						required: true,
						message: '请选择是否指定条件包邮',
						trigger: 'change',
					},
				],
				pricingType: [
					{
						required: true,
						message: '请选择计价方式',
						trigger: 'change',
					},
				],
				fullAmount: [
					{
						required: true,
						message: '请输入满包邮（元）',
						trigger: 'change',
					},
				],
			},
		});

		const dialog = ref(false);
		const loading = ref(false);
		const formRef = ref();
		const initForm = (row: any) => {
			if (row && row.id) {
				getDetail(row.id);
			}
			dialog.value = true;
		};
		const getDetail = (id: string) => {
			loading.value = true;
			// 修改
			getById(id)
				.then((response: any) => {
					loading.value = false;
					data.form = response.data.data;
				})
				.catch(() => {
					loading.value = false;
				});
		};
		/**
		 * 关闭事件
		 */
		const handleClose = () => {
			resetForm(formRef.value);
		};
		/**
		 * 重置表单
		 */
		const resetForm = (formEl: FormInstance | undefined) => {
			if (!formEl) return;
			data.form.id = undefined;
			loading.value = false;
			dialog.value = false;
			formEl.resetFields();
		};
		/**
		 * 提交按钮
		 */
		const submitForm = async (formEl: FormInstance | undefined) => {
			if (!formEl) return;
			await formEl.validate((valid, fields) => {
				if (valid) {
					loading.value = true;
					if (data.form.id) {
						//修改
						edit();
					} else {
						//新增
						add();
					}
				}
			});
		};
		/**
		 * 新增
		 */
		const add = () => {
			addObj(data.form)
				.then((response) => {
					resetForm(formRef.value);
					ElMessage.success('新增成功');
					emit('initPage');
				})
				.catch(() => {
					loading.value = false;
				});
		};
		/**
		 * 修改
		 */
		const edit = () => {
			editObj(data.form)
				.then((response) => {
					resetForm(formRef.value);
					ElMessage.success('修改成功');
					emit('initPage');
				})
				.catch(() => {
					loading.value = false;
				});
		};

		return {
			dialog,
			loading,
			formRef,
			initForm,
			handleClose,
			submitForm,
			...toRefs(data)
		};
	},
});
</script>
